<template>
  <div>
    <top/>
    <div id="content">
      <author-info v-if="authorInfo && articleInfo" :author-info="authorInfo" :latest-articles="latestArticles" />
      <article-detail v-if="articleInfo" :article="articleInfo" :articles="latestArticles"/>
    </div>
    <copyright/>
  </div>
</template>

<script>
import copyright from "../base/copyright";
import top from "../base/top";
import ArticleDetail from "./ArticleDetail";
import AuthorInfo from "./AuthorInfo";
import axios from "axios";
import {ip} from "../../data/ip";
export default {
  name: "detail",
  components:{
    copyright,top,ArticleDetail,AuthorInfo
  },
  data(){
    return {
      authorInfo:null,
      articleInfo:null,
      latestArticles:null
    }
  },
  mounted(){
    this.acquireData()
  },
  methods:{
    acquireData(){
      axios({
        url: ip + "/api/detail",
        method:"get",
        params:{
          id:this.$route.query.id
        }
      }).then(res=>{
        console.log(res.data)
        this.latestArticles = res.data.latestArticles
        this.authorInfo = res.data.authorInfo
        this.articleInfo = res.data.articleInfo
      })
    }
  }
}
</script>

<style>
#content{
  margin:0 auto;
  width:85%;
  padding-top:10px;
}
#content > div:first-child{
  width:28%;
  float:left;
}
#content > div:last-child{
  width:70%;
  float:right;
}
</style>
